<script>
import echarts, { number } from 'echarts'
import BaseChart from '@/components/BaseChart.vue'

export default {
  components: {
    BaseChart,
  },
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
    },
    topList: {
      type: Array,
    },
    region1: {
      type: Array,
    },
    region2: {
      type: Array,
    },
    region3: {
      type: Array,
    },
    region4: {
      type: Array,
    },
    handleStatus: {
      type: String,
    },
  },
  computed: {
    dataList() {
      const topArr = this.topList.slice(0, 14)
      topArr.forEach(item => {
        let regionItem = {}

        if (this.handleStatus == 1) {
          regionItem = this.region1.find(it => it.r1 === item.R1) ?? {}
        }

        if (this.handleStatus == 2) {
          regionItem = this.region2.find(it => it.r1 === item.R1 && it.r2 === item.R2) ?? {}
        }

        if (this.handleStatus == 3) {
          regionItem =
            this.region3.find(it => it.r1 === item.R1 && it.r2 === item.R2 && it.r3 === item.R3) ??
            {}
        }

        if (this.handleStatus == 4) {
          regionItem =
            this.region4.find(
              it =>
                it.r1 === item.R1 && it.r2 === item.R2 && it.r3 === item.R3 && it.r4 === item.R4,
            ) ?? {}
        }
        item.name = regionItem.name || '其他'
        item.value = item.UserCnt
      })
      return topArr
    },
    option() {
      return {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            label: {
              show: true,
              fontSize: 11,
              formatter(param) {
                // return param.name + ' (' + param.percent + '%)'
              },
            },
            data: [],
          },
        ],
      }
    },
  },

  methods: {},
}
</script>

<template>
  <base-chart
    height="100%"
    title="观看《》用户付费金额占比"
    :option="option">
  </base-chart>
</template>

<style lang="scss" scoped></style>
